<template>
  <div class="SystemLog overflowY" v-loading="loading">
    <!-- <div class="PageTitle"><i class="iconfont icon-jia"></i>系统日志</div> -->

    <div class="PageContent">
      <el-form :model="ruleForm" :inline="true" ref="ruleForm" label-width="120px" class="PageItem margintop20">
        <el-row :gutter="4" class="fileSearch">
          <el-form-item label="业务编码:" >
            <el-input v-model="ruleForm.businessCode" ></el-input>
          </el-form-item>
          <el-form-item label="员工姓名/工号:" >
            <el-input v-model="ruleForm.fullNameJobNo" ></el-input>
          </el-form-item>
          <el-form-item label="日志内容:">
            <el-input v-model="ruleForm.logContent" ></el-input>
          </el-form-item>
          <el-form-item label="操作时间:" prop="name">
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.createTimeStart" format="yyyy-MM-dd HH:mm"></el-date-picker>-
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.createTimeEnd" format="yyyy-MM-dd HH:mm"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-if="btnRight.btnSystemLogSearch" @click="onSubmit('search')">查询</el-button>
          </el-form-item>
        </el-row>

        <el-table
          :data="tableData"
          border
          :header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"
          stripe
          :height="tableHeight"
        >
          <el-table-column align="center" prop="fullNameJobNo" label="员工姓名/工号" width="200"></el-table-column>
          <el-table-column prop="operationTime" align="center" label="操作时间" width="150"></el-table-column>
          <el-table-column prop="logContent" align="center" label="日志内容" width="800"></el-table-column>
          <el-table-column prop="businessType" align="center" label="业务类型" width="130"></el-table-column>
          <el-table-column prop="operationType" align="center" label="操作类型" width="130"></el-table-column>
          <el-table-column prop="businessCode" align="center" label="业务编码" width="130"></el-table-column>
        </el-table>
        <div style="text-align: center;
                    height: 0px;
                    line-height: 20px;
                    font-size: 18px;">
          显示{{pager.total===0?0:(Math.ceil(pager.total/pager.pageSize)>1?((pager.currentPage-1)*pager.pageSize+1):(1))}}到{{pager.total===0?0:((Math.ceil(pager.total/pager.pageSize)===pager.currentPage)?(pager.total):(pager.currentPage*pager.pageSize))}}条
        </div>
        <p style="text-align: right;margin-top: 20px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pager.currentPage"
            :page-size="pager.pageSize"
            :page-sizes="[10,20,30,50]"
            background
            layout="total,sizes,prev, pager, next, jumper"
            :total="pager.total"
          ></el-pagination>
        </p>
      </el-form>
    </div>
     </div>

</template>

<script>
  import * as Type from "@/api/service";
  import * as user from "@/api/user";
  import { dataFormatetmd } from "@/utils/index";
  import {dataFormate} from "@/utils";

  export default {
    name: "SystemLog",
    data(){
      return{
        dialogVisible: false,
        loading: false,
        dictionary: {
          dicts: {},
          users: {},
        }, //字典
        type: [],
        ruleForm: {
          businessCode: '',
          fullNameJobNo: '',
          logContent: '',
          createTimeStart: dataFormatetmd(new Date())+" 00:00",
          createTimeEnd: ''
        },
        pager: {
          pageSize: 20, //页面大小
          total: 1,
          currentPage: 1, //第几页
        },
        dialogFormVisible:false,
        tableData: [],
        tableHeight: 0,
        btnRight: {
          btnSystemLogSearch: true, //查询
          btnSystemLogExport: true,//导出excel
        }

      }

    }, mounted() {
      this.btnRight = this.$route.meta.buttons;
      //遍历属性赋值将true与false字符串转换成布尔型的值
      for (var key of Object.keys(this.btnRight)) {
        this.btnRight[key] =
          this.btnRight[key] || this.btnRight[key] == "true" ? true : false;
      }

      this.onSubmit();
      console.log(105);
      //let that = this;
      window.onresize = function () {
        console.log(106);
        // let search = document.getElementsByClassName("fileSearch")[0].offsetHeight;
        //
        // let dom = document.getElementsByClassName("PageContent")[0].offsetHeight;
        // console.log(dom);
        // this.tableHeight = dom - search - 250;
      };
    },
    //注销window.onresize事件
    destroyed() {
      window.onresize = null;
    },
    updated() {
      this.$nextTick(() => {
        var dom = document.getElementsByClassName("PageContent")[0].offsetHeight;
        var search = document.getElementsByClassName("fileSearch")[0]
          .offsetHeight;
        this.tableHeight = dom - search - 250;
        console.log("dom2"+dom);
      });
    },
    methods:{
      onSubmit(value){
        this.loading = true;
        if (value) {
          this.pager.currentPage = 1;
        }
        this.ruleForm.createTimeStart = dataFormate(
          new Date(this.ruleForm.createTimeStart)
        );
        this.ruleForm.createTimeEnd = dataFormate(
          new Date(this.ruleForm.createTimeEnd)
        );
        let postData = {
          pageSize: this.pager.pageSize,
          currentPage: this.pager.currentPage,
          ...this.ruleForm,
        };
        //   if (this.ruleForm.businessType == 0) {
        //     postData.businessType = null;
        //   }
        //查询接口
        Type["loadSystemOperationLog"](postData)
          .then((response) => {
            const { data } = response;
            if (!data) {
              this.loading = false;
              this.$message("数据读取失败");
              return;
            }
            this.tableData = data.list;
            this.pager = data.pager;
            this.loading = false;
            //   //数据读取成功
          })
          .catch((error) => {
            this.$message(error);
            this.loading = false;
            this.tableData = [];
          });
      },
      // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function (size) {
        this.pager.pageSize = size;
        this.onSubmit();
      },
      handleCurrentChange: function (currentPage) {
        this.pager.currentPage = currentPage;
        this.onSubmit(); //点击第几页
      },

    }
  }
</script>

<style scoped>
  .w150 {
    width: 150px;
  }

  .w1230 {
    width: 72.5vw !important;
    min-width: 40px !important;
  }
  .DescriptionOfCharges {
    /* style="width:100vm; */
    widows: 100vm;
    height: 70px;
    background: #f0f0f0;
    border-left: 5px solid #a9c3de;
    padding-top: 20px;
    padding-left: 10px;
  }
  .DescriptionOfCharges > p {
    /* style="width:100vm; */
    margin-left: 30px;
    margin-top: 5px;
  }
</style>
